<template>
  <div class="user-container">
    <!-- 头部搜索区域 -->
    <div class="hd">
      <el-form :model="userForm" inline>
        <el-form-item>
          <el-input
            placeholder="输入用户名称"
            size="mini"
            style="width: 200px; margin-right: 20px"
          />
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-search
"
          >搜索</el-button>
          <el-button
            type="warning"
            size="mini"
            icon="el-icon-refresh-left

"
          >重置</el-button>
        </el-form-item>
      </el-form>
      <el-form :model="optionForm" inline>
        <el-form-item>
          <el-button
            type="success"
            size="mini"
            icon="el-icon-plus"
            @click="addUser"
          >添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格区域 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%; height: 650px; overflow-y: auto"
    >
      <el-table-column label="用户名" prop="username" />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column prop="sex" label="性别">
        <template slot-scope="scope">
          <span v-if="scope.row.sex === 1">男</span>
          <span v-if="scope.row.sex === 0">女</span>
        </template>
      </el-table-column>
      <el-table-column prop="intro" label="个人简介" />
      <el-table-column prop="mobile" label="联系方式" />
      <el-table-column label="是否会员">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.vip === 1"
            size="mini"
            type="success"
          >是</el-tag>
          <el-tag v-else size="mini" type="warning">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="账号状态">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.status === 1"
            size="mini"
            type="success"
          >激活</el-tag>
          <el-tag v-else size="mini" type="warning">禁用</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="address" label="地址" show-overflow-tooltip />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="edit(scope.row.id)"
          >编辑</el-button>
          <el-button
            type="text"
            size="mini"
            @click="del(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      :total="total"
      :page.sync="currentPage"
      :limit.sync="page"
      @pagination="getUserList"
    />

    <!-- 新增编辑对话框 -->
    <el-dialog
      :title="userId ? '编辑' : '新增'"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="addformRef" :model="addForm" label-width="80px">
        <el-form-item label="姓名" prop="username">
          <el-input v-model="addForm.username" />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="addForm.mobile" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password" type="password" />
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
          <el-date-picker
            v-model="addForm.createTime"
            type="datetime"
            style="width: 100%"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio v-model="addForm.sex" :label="1">男</el-radio>
          <el-radio v-model="addForm.sex" :label="0">女</el-radio>
        </el-form-item>
        <el-form-item label="会员" prop="vip">
          <el-radio v-model="addForm.vip" :label="1">是</el-radio>
          <el-radio v-model="addForm.vip" :label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="addForm.address" />
        </el-form-item>
        <el-form-item label="个人简介" prop="intro">
          <el-input v-model="addForm.intro" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addUser, queryList, user, editUser, deltUser } from '@/api/user'
import { Message } from 'element-ui'
export default {
  data() {
    return {
      total: 0,
      userForm: {},
      optionForm: {},
      addForm: {},
      tableData: [],
      // 当前页
      currentPage: 1,
      page: 20,
      // 对话框显示与隐藏
      dialogVisible: false,
      userId: ''
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    handleSelectionChange() {},
    // 添加用户
    addUser() {
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
      this.addForm = {}
      this.userId = ''
    },
    edit(id) {
      this.userId = id
      this.dialogVisible = true
      user(id).then((res) => {
        this.addForm = res.data
      })
    },
    // 获取用户分页数据
    getUserList() {
      queryList({
        current: this.currentPage,
        size: this.page
      }).then((res) => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    // 添加用户
    submitForm() {
      if (this.userId) {
        editUser({
          intro: this.addForm.intro,
          mobile: this.addForm.mobile,
          sex: this.addForm.sex,
          username: this.addForm.username,
          address: this.addForm.address,
          vip: this.addForm.vip,
          password: this.addForm.password,
          createTime: this.addForm.createTime,
          id: this.userId
        }).then((res) => {
          if (res.code === 200) {
            Message.success('更新成功')
            this.getUserList()
            this.dialogVisible = false
            this.addForm = {}
            this.userId = ''
          } else {
            this.dialogVisible = false
          }
        })
      } else {
        addUser({
          intro: this.addForm.intro,
          mobile: this.addForm.mobile,
          sex: this.addForm.sex,
          username: this.addForm.username,
          address: this.addForm.address,
          vip: this.addForm.vip,
          password: this.addForm.password,
          createTime: this.addForm.createTime
        }).then((res) => {
          if (res.code === 200) {
            Message.success('添加成功')
            this.getUserList()
            this.dialogVisible = false
            this.addForm = {}
            this.userId = ''
          } else {
            this.dialogVisible = false
          }
        })
      }
    },
    // 取消
    cancel() {
      this.addForm = {}
      this.dialogVisible = false
      this.getUserList()
      this.userId = ''
    },
    del(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deltUser(id).then((res) => {
            if (res.code === 200) {
              Message.success('删除成功')
              this.getUserList()
            }
          })
        })
        .catch(() => {
          this.$message({ type: 'info', message: '已取消删除' })
          this.getUserList()
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.user-container {
  height: 100%;
  padding: 20px 40px;
  .hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
